<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit8</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet/less" href="/css/reset.less">
    <link rel="stylesheet/less" href="/css/common.less">
    <link rel="stylesheet/less" href="/css/index.less">
    <link rel="stylesheet" href="/css/swiper-bundle.min.css">
</head>

<body>
    <nav class="navbar navbar-default bgcolor">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Spirit8</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">HOME</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#team">team</a></li>
                    <li><a href="#services">SERVICES</a></li>
                    <li><a href="#clients">CLIENTS</a></li>
                    <li><a href="#work">WORK</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div id="banner">
        <h1>wELCOME on <span>spirit8</span></h1>
        <h5>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
        </h5>
        <div class="arrow-btn">
            <a href="#foot">
                <img src="/images/arrow.png" alt="">
            </a>
        </div>
    </div>

    <div id="about">
        <div class="container">
            <div class="left"><img src="./images/about-background.png" alt=""></div>
            <div class="right">
                <div class="small-title">ABOUT US</div>
                <div class="big-title">Some words <span>about us</span></div>
                <div class="line"></div>
                <div class="content">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </div>
                <ul>
                    <li>
                        <img src="./images/icon16.png" alt="">
                        Mission - <span>We deliver uniqueness and quality</span>
                    </li>

                    <li>
                        <img src="./images/icon16.png" alt="">
                        Skills - <span>Delivering fast and excellent results</span>
                    </li>

                    <li>
                        <img src="./images/icon16.png" alt="">
                        Clients - <span>Satisfied clients thanks to our experience</span>
                    </li>
                </ul>
                <div class="about-btn">
                    <img src="./images/about-btn.png" alt="">
                    Browse our work
                </div>
            </div>
        </div>
    </div>

    <!-- <div id="team">
        <div class="container">
            <div class="team-text ">
                Meet <span>our team</span>
                <div class="team-one"></div>
                <div class="team-two"></div>
            </div>

            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                <div class="thumbnail text-center">
                    <img src="./images/icon16.png" alt="" class="img-circle">
                    <div class="caption text-center">
                        <p class="team-text-1">Jason Statham</p>
                        <p class="team-text-2">Knife designer</p>
                    </div>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                <div class="thumbnail text-center">
                    <img src="./images/icon16.png" alt="" class="img-circle">
                    <div class="caption text-center">
                        <p class="team-text-1">Van Damme</p>
                        <p class="team-text-2">No English</p>
                    </div>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                <div class="thumbnail text-center">
                    <img src="./images/icon16.png" alt="" class="img-circle">
                    <div class="caption text-center">
                        <p class="team-text-1">Sylvester Stallone</p>
                        <p class="team-text-2">Cigar Lover</p>
                    </div>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
                <div class="thumbnail text-center">
                    <img src="./images/icon16.png" alt="" class="img-circle">
                    <div class="caption text-center">
                        <p class="team-text-1">Jet Li</p>
                        <p class="team-text-2">I need more money</p>
                    </div>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>
            <div class="team-bottom">
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </div>
    </div> -->

    <div id="team">
        <div class="title">Meet <span>our team</span></div>
        <div class="line1"></div>
        <div class="line2"></div>


        <div class="swiper team-swiper container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>

                        <div class="item">
                            <div class="avatar">
                                <img src="./images/avatar.jpg" alt="">
                            </div>
                            <div class="nickname">
                                <p>Jason Statham</p>
                                <p>Knife designer</p>
                            </div>
                            <div class="info">
                                Do not seek to change what has come before. Seek to create that which has not.
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div id="services">
        <div class="container">
            <div class="services-text">
                TAKE A LOOK AT <span>OUR SERVICES</span>
                <div class="line1"></div>
                <div class="line2"></div>
                <p class="text-left">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.
                </p>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" id="phone">
                <div class="thumbnail">
                    <div class="thumbnail-img">
                        <img src="./images/33-spirit8-digital-agency_0.png" alt="" class="">

                    </div>
                    <div class="caption text-center thumbnail-text">
                        <p>WEB DESIGN</p>
                    </div>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" id="phone">
                <div class="thumbnail">
                    <div class="thumbnail-img">
                        <img src="./images/34-spirit8-digital-agency_0.png" alt="" class="">

                    </div>
                    <div class="caption text-center thumbnail-text">
                        <p>MOBILE APPS</p>
                    </div>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" id="phone">
                <div class="thumbnail">
                    <div class="thumbnail-img">
                        <img src="./images/35-spirit8-digital-agency_0.png" alt="" class="">
                    </div>
                    <div class="caption text-center thumbnail-text">
                        <p>PHOTOGRAPHY</p>
                    </div>
                    <p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
                        1.10.32.</p>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3" id="phone">
                <div class="thumbnail">
                    <div class="thumbnail-img">
                        <img src="./images/36-spirit8-digital-agency_0.png" alt="" class="">

                    </div>
                    <div class="caption text-center thumbnail-text">
                        <p>MARKETING</p>
                    </div>
                    <p>Do not seek to change what has come before. Seek to create that which has not.</p>
                </div>
            </div>

        </div>
    </div>

    <div id="clients">
        <div class="container">
            <div class="clients-text">
                SOME OF <span>OUR CLIENTS</span>
                <div class="line1 "></div>
                <div class="line2"></div>
            </div>
            <div class="clients-img">
                <img src="./images/37-spirit8-digital-agency_0.png" alt="">
            </div>
            <div class="clients-bottom">
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </div>
    </div>

    <div id="work">
        <div class="container">
            <div class="work-text ">
                TAKE A LOOK AT <span>OUR WORK</span>
                <div class="line1"></div>
                <div class="line2"></div>
                <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                    from a line in section 1.10.32.</p>
            </div>
            <div class="work-content">
                <div class="work-top">
                    <div class="work-left">
                        <span>Filter by type</span>
                    </div>
                    <div class="work-right">
                        <span>All </span>
                        <span>| Web design</span>
                        <span>| Mobile design</span>
                        <span>| photograpy</span>
                    </div>
                </div>
                <!-- .work .work-text.work-content .###  ~~~~work-text和work-content贴在一起就是同级 -->
                <div class="work-img">
                    <div class="work-img-box">
                        <img src="./images/1.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/1.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/1.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/1.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <!-- two -->

                    <div class="work-img-box">
                        <img src="./images/2.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/2.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/2.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/2.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/3.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/3.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/3.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="work-img-box">
                        <img src="./images/3.png" alt="">
                        <div class="work-of-hover">
                            <p>TREND AND FASHION</p>
                            <p>Website design</p>
                            <div>
                                <img src="/images/5_03.png" alt="">
                            </div>
                        </div>
                    </div>



                </div>
            </div>
        </div>
    </div>

    <div id="testimonials">
        <div class="title"><span>our clients'</span>testimonials</div>
        <div class="line1"></div>
        <div class="line2"></div>


        <div class="swiper testimonials-swiper container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="text">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance.
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                                section 1.10.32.
                            </div>
                            <div class="name">
                                Dean Martin, CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="list">
                        <div class="item">
                            <div class="text">This book is a treatise on the theory of ethics, very popular during the
                                Renaissance.
                                The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                                section 1.10.32.
                            </div>
                            <div class="name">
                                Dean Martin, CEO Acme Inc.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination2"></div>
        </div>
    </div>

    <div id="contact">
        <div class="title">FEEL FREE TO <span>CONTACT US</span></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="content">
            <p>
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good
                and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
                during
                the Renaissance.
            </p>
        </div>

        <div class="info">
            <div class="container">
                <div class="info-head">
                    <div class="contact-info-left">
                        <p>Name<span> *</span></p>
                        <input type="text" name="" id="">
                    </div>
                    <div class="contact-info-right">
                        <p>Email Address<span> *</span></p>
                        <input type="email" name="" id="">
                    </div>
                </div>
                <div class="info-foot">
                    <p>Message <span>*</span></p>
                    <textarea class="form-control" rows="6"></textarea>
                </div>
                <button type="submit" class="btn btn-default">Send</button>
            </div>
        </div>
    </div>

    <div id="foot">
        <div class="container">
            <div class="foot-left">
                <span>ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</span>
            </div>

            <div class="foot-right">
                <img src="/images/11.png" alt="">
                <img src="/images/12.png" alt="">
                <img src="/images/13.png" alt="">
                <img src="/images/14.png" alt="">
                <img src="/images/15.png" alt="">
            </div>
        </div>
    </div>
</body>

</html>
<script src="/js/jquery-3.7.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/less.min.js"></script>
<script src="/js/swiper-bundle.min.js"></script>

<script>
    const TeamSwiper = new Swiper('.team-swiper', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    })

    const Testimonialsswiper = new Swiper('.testimonials-swiper', {
        loop: true, // 循环模式选项
        pagination: {
            el: '.swiper-pagination2',
            clickable: true,
        },
    })

    // 锚点跳转滑动效果 $ => jquery 选择器 写法跟css选择器一样
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#up a[href]').click(function(){
        // 判断当前的路径是否跟事件的路径一致
        if(location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
        {
            // /index.html
            // let reg = /^\//;
            // console.log(location.pathname.match(reg));
            // console.log(location.pathname.replace(/^\//,''));
            // 获取元素（string） => 实例对象 通过id选择器获取
            let target = $(this.hash);// #el
            // console.log(this.hash);
            console.log(location);

            // $('[name="banner"]')
            target = target.length > 0 && target || $('[name=' + this.hash.slice(1) + ']');
            
            // 一定要当他找到锚点元素的时候，才跳转锚点
            if(target.length > 0)
            {
                // 获取目标元素的位置
                var targetOffset = target.offset().top + 10;

                //让页面的body和html 滚动到 targetOffset这个位置
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
            }
        }

    });
</script>